<template>
  <view class="xllb">
    <!-- 搜索成功页面 -->
    <image class="back-img" src="@/static/return.png" :style="{top: statusBarHeight + 'px'}" mode="widthFix"
      @click="back"></image>
    <view class="bj" :style="{ 'background': 'url('+gifUrl+')50% / cover no-repeat'}" @click="lookImage(gifUrl)">

    </view>
    <view class="indexbox">
      <view :class="isClass == 0? 'indexbox_left':isClass == 1?'indexbox_left1': 'indexbox_left2'"
        v-for="(item,index) in imageList" :key="index" @click="changeBtn(item.images)">
        <view>
          <image v-if="isClass == 1" class="inox_left_img" :src="item.images" mode="widthFix"></image>
          <view v-else class="inox_left_img" :style="{'backgroundImage':'url('+item.images+')' }"></view>
        </view>
        <!-- <view :class="isClass == 1?'inl_content':'inl_content'">{{ item.name }}</view> -->
      </view>
    </view>
    <loading v-show="isLoading"></loading>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: true,
        isClass: 0,
        imageList: [],
        statusBarHeight: 0,
        gifUrl: ''
      }
    },
    computed: {

    },
    onLoad(opt) {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 10;
      this.$uniCloud('imagesBase', {
        type: 'search',
        name: opt.word
      }).then(res => {
        if (res.result) {
          this.imageList = res.result.data
          if (this.imageList.length > 0) {
            this.gifUrl = this.imageList[0].images
            this.isLoading = false
          }
        }
      })
    },
    methods: {
      lookImage(url) {
        uni.previewImage({
          urls: [url]
        });
      },
      changeBtn(img) {
        this.gifUrl = img;
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #FFFFFF;
  }

  .back-img {
    position: absolute;
    left: 30rpx;
    width: 45rpx;
    height: 45rpx;
    z-index: 999;
  }

  .xllb {
    padding-bottom: 50rpx;
    background: linear-gradient(to right, #bdc3c7, #0b0604);
    min-height: 100vh;
  }

  .bj {
    width: 100%;
    min-height: 500rpx;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 40%, rgba(0, 0, 0, 0.2) 90%, rgba(255, 255, 255, 0) 100%);
  }

  .indexbox {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    height: calc(100vh - 500rpx);
    overflow: auto;

    .indexbox_left1 {
      position: relative;
      padding: 0 10rpx;
      margin-bottom: 15rpx;
      width: 100%;
      min-height: 443rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .inl_content {
        margin-top: 10rpx;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        bottom: 0rpx;
      }

      .inox_left_img {
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 100%;
        min-height: 380rpx;
        height: auto;
        background-repeat: no-repeat;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }

    }

    // margin-bottom: 60rpx;
    .indexbox_left2 {
      position: relative;
      margin-left: 15rpx;
      margin-bottom: 15rpx;
      width: 355rpx;
      height: 603rpx;
      border-radius: 20rpx;
      // overflow: hidden;
      // box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.37);

      .inl_content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0rpx;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 560rpx;
        background-repeat: no-repeat;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        background-size: cover;
        background-position: 50%;
        border-radius: 20rpx;
      }
    }

    .indexbox_left {
      position: relative;
      margin-top: 15rpx;
      margin-left: 15rpx;
      width: 355rpx;
      height: 305rpx;
      border-radius: 20rpx 20rpx 0 0;
      // background-color: #ddd;

      .inl_content {
        position: absolute;
        width: 98%;
        bottom: 0rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .inox_left_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 355rpx;
        height: 255rpx;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        box-shadow: 0 0rpx 10rpx rgba(51, 51, 51, 0.67);
        border-radius: 20rpx;
      }
    }
  }
</style>
